<template>
  <scroll
    class="wrapper"
    :data="homeList"
    :pullup="pullup"
    :pulldown="pulldown"
    @pulldown="loadData"
    @pullup="nextPage"
  >
    <component
      v-for="(item,index) in homeList"
      :key="index"
      :is="item.compnentName"
      :list="item.data"
      :title="item.title"
      :num-unit="item.numUnit"
      :url="{name: 'moreboom', query: {type: item.type}}"
      @link-to="linkTo"
    ></component>
  </scroll>
</template>
<script>
  import Scroll from '@/components/Scroll'
  import HomeIconMenu from '../Home/components/HomeIconMenu'
  import HomeItemOne from '../Home/components/HomeItemOne'
  import HomeItemOneBig from '../Home/components/HomeItemOneBig'
  import HomeItemTwo from '../Home/components/HomeItemTwo'
  import { getHomeList, getVideoListByType } from '@/api/fetch'
  import { homeLinkTo as linkTo } from '~js/common.js'

  export default {
    name: 'FreeActivity',
    components: {
      Scroll,
      HomeIconMenu,
      HomeItemOne,
      HomeItemOneBig,
      HomeItemTwo,
    },
    data() {
      return {
        componentList: ['home-item-one', 'home-item-two', 'home-item-one-big'],
        componentListUnit: ['人开通', '人开通', '人开通', '人开通'],
        pulldown: true,
        pullup: true,
        page: 1,
        homeList: [],
      }
    },
    computed: {
      currentComponent() {
        return 'home-item-one'
      },
    },
    created() {
      this.fetchHomeList()
    },
    methods: {
      async fetchHomeList() {
        const d = await getHomeList()
        if (d.errcode == 0) {
          d.data.map((item, idx) => {
            console.log('TCL: fetchHomeList -> item', item)
            console.log(
              'TCL: fetchHomeList -> item',
              this.componentList[item['layout_type']]
            )
            item['compnentName'] = this.componentList[item['layout_type']]
            item['numUnit'] = this.componentListUnit[item['layout_type']]
            item.data.map(item2 => {
              item2['id'] = item2['id']
              item2['title'] = item2['title']
              item2['imgUrl'] = item2['picture']
              item2['desc'] = item2['detail']
              item2['price_discounts'] = item2['market_price']
              item2['price_original'] = item2['shop_price']
              item2['num'] = item2['open']
              item2['type'] = item2['price_type']
            })
          })
          this.homeList = d.data
          console.log('TCL: fetchHomeList ->  this.homeList', this.homeList)
        }
      },
      loadData() {
        this.fetchVideoListByType(1).then(res => {
          if (res.errcode === 0) {
            this.page = 1
            this.homeList = res.data || []
          }
        })
      },
      nextPage() {
        this.page += 1
        this.fetchVideoListByType(this.page).then(res => {
          if (res.errcode === 0) {
            this.homeList = this.homeList.concat(res.data)
          } else {
            this.page -= 1
          }
        })
      },
      async fetchVideoListByType(thepage) {
        const res = await getVideoListByType({
          page: thepage,
          type_id: this.$route.query.type,
        })
        return res
      },
      linkTo(obj) {
        console.log("TCL: linkTo -> obj", obj)
        let routeName = linkTo(obj.type)
        console.log("TCL: linkTo -> routeName", routeName)
        this.$router.push({
          name: routeName,
          query: {
            vid: obj.vid,
            type: obj.type
          },
        })
      }
    },
  }
</script>

<style lang="less" scoped>
  @import '~less/variable.less';
  @import '~less/mixins.less';
  .wrapper {
    height: 100vh;
    overflow: hidden;
    padding: 10px;
    margin: 10px 0;
  }
</style>
